<script setup lang="ts">
import { ref } from 'vue'
import CollegeTable from '@/pages/subject/subjectDetail/component/college-table.vue'

const dataInfo = ref([
  { title: '就业平均薪资', value: '9415', color: '#5c8b85' },
  { title: '最多去向行业', value: '媒体', color: '#719dc0' },
  { title: '最多去向岗位', value: '编辑/记者', color: '#bd925f' },
  { title: '最多去向城市', value: '北京', color: '#bd925f' },
])

const tableThs = ref<Array<string>>(['岗位名称', '占比', '占比2', '占比3'])
const tableTrs = ref<Array<object>>([
  { name: '编辑/记者', data: ['25.7%', '25.7%', '25.7%'] },
  { name: '广告/文案/策划', data: ['25.7%', '25.7%', '25.7%'] },
]) //设置表格内容，name代表第一列，data指的是内容
const widthList = ref([1, 1, 1, 1]) //控制每行每列占多少比例
</script>

<template>
  <view class="college-postgraduate wh100p flex-column" style="padding: 20rpx 20rpx; box-sizing: border-box">
    <view class="w100p flex dataInfo-box" style="">
      <view
        v-for="(item, index) in dataInfo"
        :key="index"
        class="dataInfo-item flex-column column-center"
        style="justify-content: space-between; height: 80rpx"
      >
        <view class="font18" style="line-height: 30rpx" :style="{ color: item.color }">{{ item.value }}</view>
        <view class="font12 flex-center column-center" style="line-height: 30rpx">{{ item.title }}</view>
      </view>
    </view>
    <view class="w100p flex-column subject-popularity-box">
      <view class="title">专业热度</view>
      <view class="content" />
    </view>
    <view class="subject-workDirect-box flex-column">
      <view class="title">岗位去向</view>
      <college-table
        class="custom"
        :custom-head-class="['bga0c4f4', 'colorfff', 'font12']"
        :custom-tb-class="['font12', 'subject-tb-text']"
        :is-fixd-f-c="true"
        :stripe="true"
        :stripe-color="'rgba(160, 196, 244, 1)'"
        style="height: 700rpx"
        :table-ths="tableThs"
        :table-trs="tableTrs"
        :table-width="800"
        :text-align="'center'"
        :width-list="widthList"
      />
    </view>
  </view>
</template>

<style scoped>
.college-postgraduate {
  box-sizing: border-box;
}

.dataInfo-box {
  padding: 10rpx 0;
}

.dataInfo-item {
  flex: 1;
}

.subject-popularity-box .title {
  padding: 24rpx 0;
  font-size: 36rpx;
  font-weight: 1000;
  border-bottom: 1rpx solid #f6f6f6;
}

.subject-popularity-box .content {
  height: 120rpx;
}

.subject-workDirect-box .title {
  padding: 24rpx 0;
  font-size: 36rpx;
  font-weight: 1000;
  border-bottom: 1rpx solid #f6f6f6;
}

.postageWork-title {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f6f6f6;
}

.postageWork-item {
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f6f6f6;
}
</style>
